.navigation-bar-item {
  width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;

  .button:active {
    color: $studio-white;
  }

  &.is-selected {
    .button {
      color: $studio-simplenote-blue-50;

      svg[class^='icon-'] {
        fill: $studio-simplenote-blue-50;
      }

      &:active {
        color: $studio-white;
        svg[class^='icon-'] {
          fill: $studio-white;
        }
      }
    }
  }
}

.navigation-bar-item__icon {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;

  svg {
    vertical-align: middle;
    position: relative;
    top: -0.2em;
  }
}
